<template style="background: #f5f5f9;">
	<view>
		<view class="c-box" id="product">
			<view class="my">
				<view class="mt">
					 <person-header :currentUser="currentUser"></person-header>
				</view>
			</view>
			<view class="product">
				<view class="template" v-if="infinite_page.productList.length>0">
					<view class="h2">{{type=='collect'?'产品收藏量查看':'产品浏览量查看'}}</view>
					<view class="ul">
						<view class="li" v-for="(item,index) in infinite_page.productList" :key="index">
							<view class="a" @click="toBrowseHistory(item)">
								<view class="img"><image mode="widthFix" :src="item.banarImgList[0]" /></view>
								<view class="tit">
									<view class="nowrap h2" >{{item.productName}}</view>
									<view class="p" >{{currentUser.company}} ></view>
									<view class="b">
										<view class="num" >¥
											<view class="span">{{item.price?item.price:'询价'}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="lastLine">我是有底线的</view>
			<view class="c-h120"></view>
		</view>
	</view>
</template>

<script>
	import statisticsApi from '@/api/statistics.js'
	import commonApi from '@/utils/commonMethod.js';
	import personHeader from "../../components/person/personHeader.vue";
	
	export default {
		components: {
			personHeader
		},
		data() {
			return {
				currentUser: {},
				collectionCount: '',
				browseCount: '',
				infinite_page: {productList: [],demandList:[]},
				disabled: false,
				type: '',
				
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		async onLoad(options) {
			this.type = options.type
			if(this.type == 'collect'){
				uni.setNavigationBarTitle({
					title:"收藏量"
				})
			}
			if(this.type == 'browse'){
				uni.setNavigationBarTitle({
					title:"商品浏览量"
				})
			}
			//获取当前用户
			const currentPromise = await commonApi.currentUserAxios()
			this.currentUser = currentPromise.data.session_user_h5
			//获取我的产品
			this.getProductList()
			//获取我的需求
			// this.getDemandList()
			
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
	
		},
		onShow(){
		  
		  setTimeout(()=> {
		    
		    if (getApp().globalData.onShow) {
		      getApp().globalData.onShow = 0;
		      console.log("demo前后台切换之切到前台")
		    }
		    else {
		      console.log("demo页面被切换显示")
		      this.startTime = +new Date();
		    }
		    
		  }, 100);
		},
		onHide(){
		  setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		onUnload(){
		    setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		methods: {
			saveFootPrint(stayTime){
			    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"产品浏览量")
			  			
			},
			getProductList() {
				statisticsApi.getProductList(this.currentUser.id).then(res => {
					this.infinite_page.productList = res.data.list
					this.infinite_page.productList.forEach((value, index, array) => {
						value.banarImgList = value.banarImg.split(',')
					})
				})
			},
			toBrowseHistory(item){
				 if(this.type == 'collect'){
					 uni.navigateTo({
					 	url: '/pages/statistics/followMine?type=collectMyProduct&productId='+item.id
					 })
				 }else{
					 uni.navigateTo({
					 	url: '/pages/statistics/browsingHistory?type=browseMine&productId=' + item.id
					 })
					 
				 }
				 
			}
		}
	}
</script>

<style>
	.my .mt {
		/* height: 5.733333rem; */
		background: url(https://m.nocexpo.com/statics/js/modules/h5/img/img15.jpg) no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		margin-bottom: 28rpx;
		background-color: #fff;
		height: auto;
	}
	.product {
	    padding: 0 28rpx;
	}
	.product .h2 {
    padding-top: 23rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 28rpx;
	}
	.product .li {
		padding: 14rpx;
		background: #fff;
		border-radius: 9rpx;
		overflow: hidden;
		margin-top:  9rpx;
	}
	.a {
	    color: #5c5c5c;
	    -moz-transition: 0.5s ease;
	    -webkit-transition: 0.5s ease;
	    -o-transition: 0.5s ease;
	}
	.product .li .img {
	    width: 140rpx;
	    height: 140rpx;
	    border-radius: 9rpx;
	    overflow: hidden;
	    float: left;
	}
	image {
	    width: 100%;
	}
	.product .li .tit {
	    width: 500rpx;
	    height: 140rpx;
	    overflow: hidden;
	    float: right;
	}
	.product .li .tit .h2 {
	    font-size: 24rpx;
	    color: #333333;
	    padding: 4.7rpx 0;
	    margin-bottom: 4.7rpx;
	}
	.product .li .tit .p {
	    color: #8f9aa8;
	    font-size: 20rpx;
	}
	.product .li .tit .b {
	    overflow: hidden;
	    margin-top: 17rpx;
	}
	.product .li .tit .num {
	    float: left;
	    color: #fc5260;
	    font-size: 22rpx;
		display: flex;
	}
	.product .li .tit .num .span {
	    font-size: 30rpx;
	}.lastLine {
    font-size: 20rpx;
    color: #b0b2bf;
    line-height: 70rpx;
    text-align: center;
    padding-bottom: 28rpx;
    margin-top: 102rpx;
	}
	.c-h120 {
		height: 112rpx;
	}
	
	
</style>